<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>互动课件</title>
    <meta name="keywords" content="芈小兔教学平台,科学芈盒教学平台">
    <meta name="description"
        content=" “科学芈盒”品牌由北京芈小兔教育科技有限公司创立,以“反对填鸭教学,主张不教的教育”为教育理念,致力于为全国教育培训机构及学校提供幼少儿STEAM教育解决方案。">
    <link rel="icon" href="./images/MIXIAOTU.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./font/indexFont/iconfont.css">
    <link rel="stylesheet" href="./css/ineractCourse.css">
</head>

<body>
    <!-- 头部 -->
    <header class="header screenFullNone">
        <div class="container">
            <div class="Hleft">
                <a href="index.html" id="logoInfo">
                    <img src="./images/courseware/科学小伙伴@2x.png" alt="logo科学小伙伴">
                </a>
                <a href="interactCourse.html" id="hudongzujian">
                    <p class="personal"><span></span><strong>互动课件创作</strong></p>
                </a>
            </div>
            <div class="Hright">
                <div id="viewVideo"><img src="./images/ineteractVideoPlay.png" alt="ineteractVideoPlay"></div>
                <!-- <button class="headerBtns" id="save">保存</button> -->
                <button class="headerBtns" id="publish">发布到后台</button>
            </div>
        </div>
    </header>
    <!-- 互动课件制作操作面板 -->
    <div class="makeInteractCou">
        <div class="Mleft">
            <h3>素材库</h3>
            <div class="conList">
                <ul id="materialStore">
                    <!-- <li class="dragStyle" playUrl="${aliyunUrl+uploadInfo.object}" materialId="${uploadInfo.videoId}" isVideo="${aliyunUrl+uploadInfo.object}">
                        <div class="conBox" style="display: flex;justify-content: center;align-items: center;">
                            <img style="width:70%;height:70%;" draggable="false" src="./images/video.png" alt="图片地址加载失败">
                        </div>
                        <p>${file.name}</p>
                    </li> -->
                    <!-- <li class="dragStyle">
                        <div class="conBox">
                            <img draggable="false" src="./images/sanjiao1.png" alt="">
                        </div>
                        <p>视频素材名称1111111111111111111</p>
                    </li>
                    <li class="dragStyle">
                        <div class="conBox">
                            <img draggable="false" src="./images/sanjiao1.png" alt="">
                        </div>
                        <p>图片素材名称</p>
                    </li>
                    <li class="dragStyle yinpin">
                        <div class="conBox">
                            <img draggable="false" src="./images/yinpin.png" alt="">
                        </div>
                        <p>音频素材名称</p>
                    </li> -->
                </ul>
            </div>
            <button id="addUpload">添加</button>
        </div>
        <div class="Mright">
            <div class="MRTop">
                <div class="storeInfo">
                    <video controls src=""></video>
                </div>
                <div id="interactCouName">
                    <h4>课件名称</h4>
                    <label>课件名称<input id="courseName" autocomplete="off" type="text" maxlength="8"></label>
                    <p style="color:red;" class="dn">11</p>
                    <div class="cover">
                        <input type="file" id="uploadImgs" accept="image/gif,image/png,image/jpeg,image/webp"
                            style="display:none;" autocomplete="off">
                        <span>课程封面</span>
                        <label for="uploadImgs">
                            <img src="./images/courseImgUpload.png" alt="">
                        </label>
                    </div>
                    <div style="display: flex;justify-content: space-between;align-items: center;">
                        <!-- <div id="uploadFileOpt">
                            <label for="uploadImgs">更换封面</label>
                        </div> -->
                        <!-- <div class="optBtns">
                            <button id="cancel">取消</button>
                            <button id="confirm">确定</button>
                        </div> -->
                    </div>
                </div>
            </div>
            <!-- <img id="lineTuOne" src="./images/互动课件-添加类型_slices/selOne.png" alt="">
                            <img id="lineTuTwo" src="./images/互动课件-添加类型_slices/selTwo.png" alt="">
                            <img id="lineTuThree" src="./images/互动课件-添加类型_slices/selThree.png" alt="">
                            <img id="lineTuFour" src="./images/互动课件-添加类型_slices/selFour.png" alt=""> -->
            <div class="MRBot">
                <h4>剧情树</h4>
                <div class="videoTreeBox">
                    <div class="tree" id="container">
                        <!-- <div class="conAgain" cate='0'>
                            <div class="conBox">
                                <p>拖拽素材至此</p>
                                <strong onclick="createTree"></strong>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- uploadfiles添加类型 -->
    <div class="upload dn">
        <h3>添加类型</h3>
        <ul>
            <li>
                <input type="file" id="uploadVideo" accept="video/mp4" style="opacity: 0;" multiple>
                <div class="fileCate"></div>
                <p>视频</p>
            </li>
            <li>
                <input type="file" id="uploadImg" accept="image/png,image/jpeg,image/webp" style="opacity: 0;" multiple>
                <div class="fileCate"></div>
                <p>图片</p>
            </li>
            <li>
                <!-- <input type="file" id="uploadAudio" accept="audio/mp3" style="opacity: 0;"> -->
                <div class="fileCate"></div>
                <p>音频</p>
            </li>
            <li>
                <!-- <input type="file" id="uploadGif" accept="image/gif" style="opacity: 0;"> -->
                <div class="fileCate"></div>
                <p>GIF图</p>
            </li>
            <li>
                <!-- <input type="file" id="uploadPPT" accept="image/gif,image/png,image/jpg,image/webp" style="opacity: 0;"> -->
                <div class="fileCate"></div>
                <p>PPT</p>
            </li>
            <li id="getInterGame">
                <!-- 添加的ai游戏，是老师在后台做好的-->
                <!-- <input type="file" id="uploadAI" accept="image/gif,image/png,image/jpg,image/webp" style="opacity: 0;"> -->
                <div class="fileCate"></div>
                <p>AI游戏</p>
            </li>

        </ul>
    </div>
    <!-- 剧情模块操作 -->
    <div class="storyLineOpt dn">
        <div class="headerBtns" id="storyLineOptHead">
            <h3>剧情模块</h3>
            <div class="optBtns">
                <button id="setAllmodi">应用</button>
                <button id="cancelAllmodi">取消</button>
            </div>
        </div>
        <div id="fixedHeader">
            <div>
                <div class="storyLineName">
                    <h4>剧情模块设置</h4>
                    <label>名称<input autocomplete="off" type="text" id="juQName" placeholder="请输入剧情名称"></label>
                    <div style="position:relative">
                        <label>素材<input autocomplete="off" id="selMaterial" type="text" placeholder="请选择"></label>
                        <ul id="showMaterial">
                        </ul>
                    </div>
                </div>
                <div class="storyBranch">
                    <h4>剧情分支设置</h4>
                    <!-- 选项卡组件设置 -->
                    <div id="selTabBox">
                        <h5>选项卡设置</h5>
                        <div class="pullDown dn">
                            <!-- 倒计时 -->
                            <label class="countDown"><input type="checkbox" id="daojishi">启用倒计时 (5s)</label>
                            <div id="SetSelImg">
                                <img src="./images/blackGround.jpg" alt="">
                                <!-- <p class="options" id="selA">A<span></span></p> -->
                                <!-- <p class="options" id="selB">B</p> -->
                            </div>
                            <label class="branchInfo">剧情分支信息</label>
                            <div id="optionsInfo">
                                <!-- <div>
                                        <p>选项A 剧情模块：剧情名称</p> -->
                                <textarea maxlength="24" placeholder="请输入选项名称（24字符）"></textarea>
                                <!-- </div>
                                <label>
                                    <input type="radio">
                                    默认选项
                                </label> -->
                            </div>
                        </div>
                    </div>
                    <!-- 画面暂停组件内容设置 -->
                    <div id="picturePause">
                        <!--画面暂停-->
                        <h5>画面暂停</h5>
                        <div id="switchBtn" clickBool="0">
                            <span><i></i></span>
                        </div>
                    </div>
                    <!-- 备课教案组件设置 -->
                    <div id="teachPlan">
                        <h5>备课教案</h5>
                        <div id="tPFullDown" class="pullDown dn">
                            <p>请选择素材</p>
                            <ul class="dn">
                                <li id="noneSC">无素材</li>
                            </ul>
                            <img src="" alt="">
                        </div>
                    </div>
                    <!-- 标注组件内容设置 -->
                    <div id="labelBox">
                        <h5>标注设置</h5>
                        <div class="pullDown dn">
                            <div id="setLabelImg">
                                <img draggable="false" src="./images/blackGround.jpg">
                                <!-- <div id="labelA" class="setLabel">
                                    <em class="iconfont icondian"></em>
                                    <i></i>
                                    <p>请输入标注A</p>
                                </div> -->
                                <!-- <p class="setLabel" id="labelB">请输入标注B</p> -->
                            </div>
                            <div id="uploadBackImg">
                                <input type="file" id="uploadLabelBack" accept="image/png,image/jpg"
                                    style="opacity: 0;">
                                <p id="userTip">上传背景图</p>
                            </div>
                            <h6>剧情分支信息</h6>
                            <div id="setLabelInfo">
                                <div class="title">
                                    <span>剧情模块：剧情名称</span>
                                    <strong id="createLabel">添加</strong>
                                </div>
                                <!-- <div class="setConLabel">
                                    <p>标注1</p>
                                    <textarea maxlength="8" placeholder="请输入标注内容（8字符）"></textarea>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <!-- 多视角组件内容设置 -->
                    <!-- <div id="mulViewBox">
                        <h5>多视角设置</h5>
                        <div class="pullDown dn">
                            <div id="setLabelImg1">
                                <img src="./images/blackGround.jpg" alt="">
                            </div>
                            <h6>剧情分支信息</h6>
                            <div id="setLabelInfo">
                                <div class="title">
                                    <span>剧情模块：剧情名称</span>
                                    <strong>添加</strong>
                                </div>
                                <div class="setConLabel">
                                </div>
                                <div class="setConLabel">
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
    <!--   选项卡点击出的弹窗  -->
    <div id="selCardDiagBox">
        <div class="centerBox">
            <p>选项画面预览</p>
            <div class="close">
                <img src="./images/courseware/cha2.png" alt="关闭">
            </div>
        </div>
    </div>
    <!--   标注点击出的弹窗  -->
    <div id="labelDiagPreBox">
        <div class="centerBox">
            <p>标注预览</p>
            <div class="close">
                <img src="./images/courseware/cha2.png" alt="关闭">
            </div>
        </div>
    </div>
    <!-- 提交后的弹窗 -->
    <div id="commitDialog">
        <div>
            <span id="commitAfterText">删除请求已提交</span>
        </div>
    </div>
    <!-- 预览互动视频的弹窗 -->
    <div id="previewVideo">
        <div class="centerBox">
            <div class="close">
                <img src="./images/courseware/cha2.png" alt="关闭">
            </div>
            <p class="title">互动视频预览</p>
            <div id="vidandIframe" style="position: relative;">
                <video id="preVideo" src="" controls autoplay></video>
                <iframe src="" id="openPlayInter" frameborder="0"></iframe>
                <!-- <iframe src="../studentPort/playInterGame.html?type=7&_interId=27716'" id="openPlayInter" frameborder="0"></iframe> -->
            </div>
            <!-- 选项按钮 -->
            <div id="selComponent">
                <p id="preSelA"></p>
                <p id="preSelB"></p>
                <p id="preSelC"></p>
                <p id="preSelD"></p>
            </div>
            <!-- 画面暂停按钮 -->
            <div id="picStopBtn">
                <div id="tierOne">
                    <div id="tierTwo">
                        <div id="tierThree">
                            <img src="./images/picstop.png" alt="picstop">
                        </div>
                    </div>
                </div>
            </div>
            <!-- 标注组件 -->
            <!-- <div id="labelComponent">

            </div> -->
        </div>
        <video src="" id="teachVideo" controls></video>
    </div>
    <!-- 添加AI互动弹窗 -->
    <div id="addInterGDia">
        <div class="centerBox">
            <div class="close">
                <img src="./images/courseware/cha2.png" alt="关闭">
            </div>
            <div>
                <p id="InterType">请选择互动类型</p>
                <ul id="showInterType">
                    <li type="7">判断互动</li>
                    <li type="8">选择互动</li>
                    <li type="9">拖拽互动</li>
                    <li type="10">标注互动</li>
                </ul>
            </div>
            <div>
                <p id="InterName">互动游戏</p>
                <ul id="showInterName">

                </ul>
            </div>
        </div>
    </div>
    <script src="./js/jquery-1.10.1.min.js"></script>
    <script src="./js/aliyun/es6-promise.min.js"></script>
    <script src="./js/aliyun/aliyun-oss-sdk-5.3.1.min.js"></script>
    <script src="./js/aliyun/aliyun-upload-sdk-1.5.0.min.js"></script>
    <script src="./js/commonTool.js"></script>
    <script src="./js/g6.js"></script>
    <script src="./js/adminInterCourse.js"></script>
    <!-- 需要树形图加载完成才可以覆盖其样式 -->
    <style>
        svg {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 100;
        }

        .g6-grid-container {
            z-index: 1 !important;
        }

        img[src=undefined],
        img[src=''] {
            display: none;
        }

        section {
            user-select: none;
            width: 100%;
            height: 100%;
            border: 1px solid rgba(4, 0, 0, 0.14);
            background: #FFF;
            border-radius: 10px;
            box-sizing: border-box;
            font-size: 12px;
            color: #999;
            text-align: center;
            line-height: 38px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        section img {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        section span {
            width: 67%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            padding-right: 6%;
        }

        .showOpt {
            width: 100%;
            background: #FFFFFF;
            display: none;
            box-shadow: 0px 5px 17px 0px rgba(4, 0, 0, 0.14);
            border-radius: 5px;
            text-align: center;
        }

        .showOpt p {
            margin: 0;
            padding: 0;
            line-height: 26px;
            font-size: 10px;
            border-radius: 5px;
        }

        #createModule {

            border-bottom: 1px solid #E6E6E6;
        }

        #createJumpModule {}

        #delModule {}

        #addFu {
            width: 16px;
            height: 16px;
            border: 3px solid #FFF;
            border-radius: 50%;
            background-size: 10px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 3px solid RGBA(237, 239, 243, 1);
        }
    </style>
</body>

</html>